/**
 * Created by 小敏哥 on 2017/6/23.
 */
import React, {Component} from 'react'
import style from './handleProcess.scss';

export default class HandleProcess extends Component {
    constructor(props) {
        super(props);
    }

    static propTypes = {
        all: React.PropTypes.number,//总长度
        current: React.PropTypes.number,//当前节点
        error: React.PropTypes.bool,//是否有错误
    };

    //渲染进度条
    renderContent() {
        let content = [];
        for (let i = 0; i < this.props.all; i++) {
            if (i == 0) {
                //起始块
                content.push(<div className={style.start} key={"processItem"+i}></div>)
            }
            //中间部分
            else if (i > 0 && i < this.props.all - 1) {
                if (i <= this.props.current) {
                    if(this.props.error&&i==this.props.current){
                        //出现错误
                        content.push(<div className={style.error} key={"processItem"+i}></div>)
                    }
                    else {
                        //中间已完成
                        content.push(<div className={style.complete} key={"processItem"+i}></div>)
                    }
                }
                else {//中间未完成
                    content.push(<div className={style.unComplete} key={"processItem"+i}></div>)
                }
            }
            //结束部分
            else {
                if (this.props.all - 1 == this.props.current) {
                    //结束部分已完成
                    content.push(<div className={style.endComplete} key={"processItem"+i}></div>)
                }
                else {
                    //结束部分未完成
                    content.push(<div className={style.endUnComplete} key={"processItem"+i}></div>)
                }
            }

        }
        return content;
    }

    render() {
        return <div className={style.processContainer}>
            {this.renderContent()}
        </div>
    }
}